<script setup lang="ts">
import { onMounted, reactive, computed, watch } from 'vue';
import _ from 'lodash';
// import { ElMessage } from 'element-plus';
import { useAppStore } from '@/store/modules/app';
import { botCenterGet } from '@/services/bot';
import { settingGet } from '@/services/setting';
import noContent from '@/assets/no-data.svg';
import { saveStorage, getStorage } from '@/utils';
import Card from '@/components/card/index.vue';

const appStore = useAppStore();
const vips = computed(() => appStore.vips);
const words = computed(() => appStore.words) as any;

const state = reactive({
  loading: false,
  bots: [] as any,
  botTemp: [] as any,
  colorData: ['#3C7EFF', '#00C2A7', '#714EFF', '#F35522'],
  bgData: ['#F4F9FF', '#EBFFFC', '#F2EFFF', '#FFF5F1'],
  shareUrl: 'http://',
  // 切换
  activeName: '',
  sxList: [] as any,
  keyword: '' as String,
  hotType: ['1', '2', '3', '4', '5', '6', '7'],
  settingData: [] as any,
});
onMounted(async () => {
  state.activeName = getStorage('writeActiveName');
  getBot();
});
const getBot = async () => {
  state.loading = true;
  const { data = [] } = await botCenterGet({});
  if (state.activeName) {
    state.bots = _.filter(data, v => v.category === state.activeName);
  } else {
    state.bots = data;
  }
  state.botTemp = data;
  state.loading = false;
  const { errCode, data: setData } = await settingGet({ key: 'botCategory' });
  if (errCode === 0) {
    state.settingData = setData;
  }
  getCate();
};
const getCate = async () => {
  const { value } = _.find(state.settingData || [], { status: '1', key: 'botCategory' }) || {};
  const temp = JSON.parse(value || '[]');
  state.sxList = _.map(temp, v => {
    const num = _.filter(state.botTemp, { category: v.code }).length;
    return {
      ...v,
      num,
    };
  });
  state.sxList.unshift({
    code: '',
    name: '全部',
    num: state.botTemp.length,
  });
};

// 筛选切换
const tabClick = async () => {
  saveStorage('writeActiveName', state.activeName);
  if (state.activeName) {
    state.bots = _.filter(state.botTemp, v => v.category === state.activeName);
  } else {
    state.bots = state.botTemp;
  }
};

watch(
  () => [vips.value, words.value.vipLevel],
  () => {},
  {
    immediate: true,
    deep: true,
  },
);
</script>

<template>
  <div v-loading="state.loading" class="write-page">
    <div class="cop-head">
      <el-tabs v-model="state.activeName" class="demo-tabs" @tab-change="tabClick">
        <el-tab-pane v-for="(item, key) in state.sxList" :key="key" :name="item.code">
          <template #label>
            <span :class="`custom-tabs-label ${state.activeName === item.code ? 'tab-checked' : ''}`">
              {{ item.name }}
            </span>
            <span class="tab-num">{{ item.num }}</span>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>

    <div class="cop-con">
      <Card
        v-for="(item, key) in state.bots"
        :key="key"
        :dataMsg="item"
        :colorData="state.colorData[key % 4]"
        :bgData="state.bgData[key % 4]"
      />
      <div v-if="state.bots.length === 0 && !state.loading" class="noContent">
        <el-image :src="noContent" class="noContent-img" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.write-page {
  max-width: 1156px;
  margin: auto;
  padding: 25px 24px 0px;

  .cop-head {
    margin-top: 0px;
    .custom-tabs-label {
      font-size: 16px;
      color: #375275;
      &:hover {
        color: #3c7eff;
      }
    }
    .el-tabs__active-bar {
      background-color: #3c7eff !important;
    }
    .tab-checked {
      font-weight: 500;
      color: #3c7eff;
    }
    .tab-num {
      height: 18px;
      background: #dee8f9;
      border-radius: 10px;
      line-height: 18px;
      padding: 0px 6px;
      margin-left: 4px;
      color: #677788;
      font-size: 12px;
    }
  }
  .cop-con {
    width: auto;
    display: flex;
    flex-wrap: wrap;
    margin-top: 16px;

    .noContent {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-top: 25%;
      .noContent-img {
        width: 120px;
        height: 120px;
        display: block;
      }
    }
  }
}
</style>
<style lang="scss">
.write-page {
  .el-tabs {
    --el-tabs-header-height: 36px;
  }
  .el-tabs__item {
    align-items: baseline;
    font-weight: 400 !important;
  }
  .el-tabs__header {
    margin: 0px;
  }
  .el-tabs__active-bar {
    background-color: #3c7eff !important;
  }
  .el-tabs__nav-wrap::after {
    background-color: #dee8f9 !important;
    height: 1px !important;
  }
}
</style>
